<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Cat Cafe WebSocket Test - One Dark Terminal</title>
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js "></script>
    <style>
        body {
            background-color: #282c34;
            /* One Dark background */
            color: #abb2bf;
            /* Light gray text */
            font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
            padding: 20px;
            margin: 0;
        }

        h1 {
            color: #61afef;
            /* Blue heading */
            border-bottom: 1px solid #555;
            padding-bottom: 5px;
        }

        #output {
            margin-top: 20px;
            padding: 12px;
            border: 1px solid #3b4048;
            min-height: 100px;
            background-color: #21252b;
            white-space: pre-wrap;
            overflow-y: auto;
            max-height: 500px;
            font-size: 14px;
            border-radius: 4px;
        }

        button {
            background-color: #3b4048;
            color: #61afef;
            border: 1px solid #4b5058;
            padding: 8px 16px;
            font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
            font-size: 14px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s ease-in-out;
        }

        button:hover {
            background-color: #61afef;
            color: #282c34;
        }
    </style>
</head>

<body>

    <h1>🐱 Cat Cafe WebSocket Test</h1>
    <button id="petBtn">Pet Cat #1</button>
    <button id="petBtn2">手动断开</button>
    <button id="fatch_tocken">fatch_tocken</button>
        <button onclick="changeCatStatus()">changeCatStatus</button>
    <div id="output"></div>

    <script>
        // 启用调试日志
        localStorage.debug = 'socket.io-client:socket';
        const socket = io({
            path: '/ws',
            auth: {
                token: '你的JWT令牌',       // 从登录接口获取
                userId: 'userid001',          // 可选附加信息
                role: 'customer'          // 用户角色
            },
            query: {
                token: "your-jwt-token",
                userId: "123"
            }
        });
        const output = document.getElementById('output');

        socket.on('connect', () => {
            log('已连接到服务器......');
        });
       
        socket.on('cat-status', (data) => {
            log(`Cat ${data.catId} is now ${data.status}`);
        });

        socket.on('disconnect', () => {
            log('已断开连接');
        });


        // 监听所有事件(调试用)
        socket.onAny((event, ...args) => {
            console.log('[所有事件]', event, args);
        });
        socket.on('reconnect_attempt', (attempt) => {
            console.log(`正在尝试第${attempt}次重连...`);
        });
        document.getElementById('petBtn').addEventListener('click', () => {
            socket.emit('cat-petted', { catId: 1 });
            log('Sent cat-petted event for cat #1');
        });

        document.getElementById('petBtn2').addEventListener('click', () => {
            socket.disconnect(); // 手动断开
        });

          document.getElementById('fatch_tocken').addEventListener('click', () => {
             // 更新认证(令牌刷新后)
            socket.auth = {  userId: 'new_userid001', role: 'admin'     };
            socket.disconnect().connect();
        });
      

        function log(message) {
            const timestamp = new Date().toLocaleTimeString();
            output.innerHTML += `[${timestamp}] ${message}\n`;
            output.scrollTop = output.scrollHeight; // Auto scroll
        }

          // 模拟发送状态变化
        function changeCatStatus(catId, status) {
            socket.emit('cat-status-change', { catId, status });
        }
    </script>

</body>

</html>